<template>
	<view>
		<view class="top-bar" id="topbar" :class="{fixedShop:current == 3}">
			<view class="menu-box" :style="{height:menu.bottom  + 4 + 'px'}">
				<!-- <image class="logo" src="/static/icon2/Echo.png"></image> -->
			</view>
			<view class="tab-title">
				<u-tabs :list="list" :is-scroll="true" bar-height="4" active-color="#00BBAA" inactive-color="#555" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<college-shop v-if="tabPage[0]" v-show="current == 0" :top="top" :bottom="bottom" @mounted="getTopAndBottom()"></college-shop>
		<college-train v-if="tabPage[1]" v-show="current == 1"></college-train>
		<college-upgrade v-if="tabPage[2]" v-show="current == 2"></college-upgrade>
		<college-active v-if="tabPage[3]" v-show="current == 3" ref="active"></college-active>
		
		
		<!-- 发布 -->
		<u-mask :show="show" @click="show = false">
			<push-topics v-if="show" @publish="show = !1"></push-topics>
		</u-mask>
	<u-tabbar :mid-button="true" :border-top="false" height="100rpx" bgColor="#67EEE4" :before-switch="beforeSwitch"
		inactive-color="#000" active-color="#fff" v-model="currentTab" :list="vuex_tabbar"></u-tabbar>
	
	
		
		<!-- <u-tabbar height="90px" icon-size="50" id="tabbar" bg-color="#fff" :before-switch="beforeSwitch" inactive-color="#000" active-color="#dd592f" v-model="currentTab" :list="vuex_tabbar"></u-tabbar> -->
	</view>
</template>

<script>
	const menu = uni.getMenuButtonBoundingClientRect()
	export default {
		data() {
			return {
				tabbg: 'linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%)',
				list: [{
					name: '情感书吧'
				},{
					name: '情感线上培训'
				}, {
					name: '会员中心'
				}, {
					name: '密爱活动'
				} ],
				current: 0,
				menu:menu,
				currentTab:3,
				tabPage:[!0,!1,!1,!1],
				show:!1,
				top:0,//顶部和底部的高度
				bottom:0
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.tabPage[index] = !0
			},
			beforeSwitch(e) {
				let url = ''
				if (e == 2) url = '/pages/fabu/index';
				if (e == 3) url = '/pages/college/index';
				if (e == 0) url = '/pages/index/index';
				if (e == 1) url = '/pages/topics/list';
				if (e == 4) url = '/pages/mine/mine';
				// 跳转
				url && uni.switchTab({
					url: url
				})
				return false
			},
			getTopAndBottom(){
				const query1 = uni.createSelectorQuery().in(this);
				const query2 = uni.createSelectorQuery().in(this);
				query1.select('#topbar').boundingClientRect(data1=>{
					this.top = data1.height
					console.log(data1)
				}).exec()
				query2.select('#tabbar').boundingClientRect(data2 => {
				  this.bottom = data2.height
					console.log(data2)
				}).exec()
			}
		},
		onReady() {
			setTimeout(()=>{
				this.getTopAndBottom()
			},300)
		},
		onReachBottom() {
			this.current == 2 && this.$refs.active.reachBottom()
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tabbar__content .u-tabbar__content__item:nth-of-type(3) .u-tabbar__content__item__text text{color: #333;font-weight: bold;}
	
	.top-bar{position: sticky;top: 0;background-color: #fff;z-index: 99;
		.menu-box{width: 100%;position: relative;
			.logo{width: 155rpx;height: 43rpx;position: absolute;left: 40rpx;bottom: 6rpx;}
		}
		.tab-title{border-bottom: 1rpx solid #ddd;}
	}
	// 商城需要计算高度，固定顶部
	.fixedShop{position: fixed;}
</style>
